<template>
  <div class="home">
    <div class="nav">
      <div class="nav-left">
        <img
          class="logo"
          src="../../public/img/avatar.jpg"
          alt=""
        />
        <span class="site-name">{{ `${username} 的博客` }}</span>
      </div>
      <div class="nav-right">
        <!-- <my-input
          v-model="inputVal"
          placeholder="请输入"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-date"
            slotData="123"
          ></i>
          <el-button
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </my-input> -->

        <el-input
          v-model.trim="search"
          placeholder="请输入内容"
          style="margin-right: 15px"
          clearable
          ><el-button
            slot="append"
            icon="el-icon-search"
            @click="onSearch"
          ></el-button
        ></el-input>

        <el-button
          type="primary"
          size="small"
          @click="$router.push('./editor')"
          >新建笔记<i class="el-icon-edit el-icon--right"></i
        ></el-button>
        <span
          class="page"
          @click="onBack"
          >首页</span
        >

        <span
          class="link"
          @click="onSkip"
          >每日一文</span
        >

        <el-dropdown
          v-for="item in navList"
          :key="item.prop"
          placement="bottom"
          @command="onCommand"
        >
          <span class="el-dropdown-link"> {{ item.label }}<i class="el-icon-arrow-down"></i> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(it, i) in item.children"
              :key="i"
              :command="it.url"
              >{{ it.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 我的 -->
        <el-dropdown
          placement="bottom"
          @command="onMyCommand"
        >
          <span class="el-dropdown-link"> 我的<i class="el-icon-arrow-down"></i> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in myNavList"
              :key="index"
              :command="item.prop"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 主题区 -->
    <router-view ref="children" />

    <a
      href="https://beian.miit.gov.cn/"
      target="_blank"
      >赣ICP备2022004219号-1</a
    >
  </div>
</template>

<script>
import MyInput from '../components/MyInput.vue'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'Home',
  components: { MyInput },
  computed: {
    // ...mapGetters({
    //   getAuth: 'getAuth',
    // }),
  },
  data() {
    //这里存放数据
    return {
      inputVal: '',

      search: '',

      username: '',

      navList: [
        {
          prop: 'A',
          label: '妙妙工具箱',
          children: [
            { prop: 'A1', label: 'vue相关文档', url: 'https://cn.vuejs.org/' },
            { prop: 'A2', label: 'Element UI文档', url: 'https://element.eleme.cn/2.13/#/zh-CN' },
            {
              prop: 'A3',
              label: 'Vant UI文档',
              url: 'https://vant-contrib.gitee.io/vant/v2/#/zh-CN/dialog',
            },
            {
              prop: 'A4',
              label: 'Echarts文档',
              url: 'https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts',
            },
            { prop: 'A5', label: 'TS文档', url: 'https://www.tslang.cn/docs/home.html' },
            { prop: 'A6', label: 'T-design文档', url: 'https://tdesign.tencent.com/' },
            {
              prop: 'A6',
              label: 'wangEditor文档',
              url: 'https://www.wangeditor.com/v5/for-frame.html#demo',
            },
          ],
        },
        {
          prop: 'B',
          label: '学习笔记',
          children: [
            { prop: 'B1', label: '笔记1' },
            { prop: 'B2', label: '笔记2' },
            { prop: 'B3', label: '笔记3' },
            { prop: 'B4', label: '笔记4' },
            { prop: 'B5', label: '笔记5' },
            { prop: 'B6', label: '笔记6' },
          ],
        },
      ],
      myNavList: [
        {
          label: '我的资料',
          prop: 'A',
        },
        {
          label: '退出登录',
          prop: 'B',
        },
      ],
    }
  },

  methods: {
    ...mapMutations({
      setKeywords: 'artic/SET_KEYWORDS',
      setAuth: 'artic/SET_AUTH',
    }),
    onBack() {
      const { path } = this.$route
      if (path === '/home' || path === '/') {
        this.$refs.children.getArticleList()
        return
      }

      this.$router.replace('/')
    },

    onSearch() {
      this.setKeywords(this.search)
      this.setAuth('')
      this.$refs.children.currentPage = 1
      this.$refs.children.getArticleList('', this.search)
      this.onAnchor()
    },

    onSelect() {},

    onCommand(url) {
      if (!url) {
        this.$message.error('非法路径')
        return
      }

      window.open(url)
    },

    onMyCommand(val) {
      if (val === 'B') {
        window.localStorage.clear('token')
        this.$router.replace('/login')
      }
    },

    onSkip() {
      window.open('https://meiriyiwen.com/')
    },

    // 跳转到指定锚点
    onAnchor() {
      const node = document.getElementById('list-box')
      setTimeout(() => {
        node.scrollIntoView(true)
      }, 500)
    },
  },
  created() {
    console.log('env::',this.$utils.env)
    this.username = window.localStorage.getItem('username') || 'admin'
  },

  mounted() {
    // 小数计算精度问题
    // console.log('小数计算0.1+0.2', 0.1 + 0.2)
    // console.log('使用math库处理小数计算精度丢失问题', Number(this.$utils.add(0.1, 0.2)))
  },
}
</script>
<style
  lang="scss"
  scoped
>

.home {
  background: #f5f5f5;
  padding: 0 50px;

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 20;
    right: 0;
    height: 3.6rem;
    box-sizing: border-box;
    padding-bottom: 10px;
    padding: 0.7rem 1.5rem;
    line-height: 2.2rem;
    box-shadow: $box-shadow;
    background: $background-color;

    .nav-left {
      /* font-size: 24px; */

      .logo {
        display: inline-block;
        height: 2.2rem;
        min-width: 2.2rem;
        margin-right: 0.8rem;
        vertical-align: top;
        border-radius: 50%;
      }

      .site-name {
        font-size: 1.2rem;
        font-weight: 600;
        color: $text-color;
        position: relative;
      }
    }

    .nav-right {
      .page {
        cursor: pointer;
        padding: 0 15px;
      }

      .page:hover,
      .link:hover {
        color: $blue-color;
      }

      .link {
        cursor: pointer;
      }

      display: flex;

      ::v-deep .el-dropdown {
        margin: 0 20px;
        cursor: pointer;
      }

      .el-dropdown:hover {
        color: #409eff;
      }
    }
  }

  /* .nav::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    position: absolute;
    bottom: 0;
  } */

  /* .home-blog {
    padding: 0;
    margin: 0 auto;

    .hero {
      text-align: center;
      overflow: hidden;
      background: url(../../public/img/home-bg.svg) center no-repeat;
      background: red;
      margin: 3.6rem auto 0;
      position: relative;
      box-sizing: border-box;
      padding: 0 20px;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;

      .hero-img {
        max-width: 300px;
        margin: 0 auto 1.5rem;
        max-height: 288px;
        display: block;
        border-radius: 19% 81% 23% 77% / 44% 57% 43% 56%;
        transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
        transform: translateY(0);
        opacity: 1;
      }

      .description {
        margin: 1.8rem auto;
        font-size: 1.6rem;
        line-height: 1.3;
      }
    }
  } */
}
</style>
